<template>
    <view class="main">
        <view class="search">
            <tn-search-box :search-button="false" :border="false" v-model="searchValue" @input="searchInputEvent"
                @search="searchBtnClickEvent" placeholder="搜索城市/拼音" />
        </view>
        <view class="hot-main">
            <view class="title">定位城市</view>
            <view class="dispaly-center hot">
                <view class="list-data active-block hot-box">
                    <view class="info dispaly-center">
                        <view class="city active">重庆
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="hot-main">
            <view class="title">热门城市</view>
            <view class="dispaly-center hot">
                <view class="list-data hot-box" @click="indexClick(item)" v-for="(item, index) in hotCity" :key="index"
                    :class="{ 'active-block': item.value == currentValue }">
                    <view class="info dispaly-center">
                        <view class="city" :class="{ active: item.value == currentValue }">{{ item.name }}
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content dispaly" :style="{ height: newsPanelHeight + 'px' }">
            <view class="city-box w-100">
                <tn-index-list title-bg-color="#fff" title-color="#000" :data="cityListData" class="h-100">
                    <template #default="{ data }">
                        <view class="list-data" @click="indexClick(data)"
                            :class="{ 'active-block': data.id == currentValue }">
                            <view class="info dispaly-center">
                                <view class="city" :class="{ active: data.id == currentValue }">{{ data.name }}
                                </view>
                            </view>
                        </view>
                    </template>
                </tn-index-list>
            </view>

        </view>
    </view>
</template>

<script setup lang="ts">
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { onLoad, onReady } from '@dcloudio/uni-app'
import { ref } from 'vue';
import { getScreenSHeight } from '@/utils/util'
import type { AddressCityDataType } from '@/types/component'
import { getCityList } from '@/api/home/home'
import type { CityType } from '@/types/responseData'

onLoad(() => {
    getCityListData()
})

// 获取城市列表
const cityListData = ref<Array<CityType>>([])
const getCityListData = async () => {
    const res = await getCityList()
    if (res.code == 0) {
        cityListData.value = res.data
    }
}

// 搜索
const searchValue = ref<string>('')
const searchInputEvent = (value: string) => {
    console.log('searchInputEvent', value)
}
const searchBtnClickEvent = (value: string) => {
    console.log('searchBtnClickEvent', value)
}

// 热门城市
const hotCity = ref<Array<AddressCityDataType>>([
    {
        name: "西安市",
        value: "029"
    },
    {
        name: "西宁市",
        value: "0971"
    }, {
        name: "赣州市",
        value: "0797"
    },
    {
        name: "固原市",
        value: "0954"
    },
    {
        name: "广安市",
        value: "0826"
    },
    {
        name: "广元市",
        value: "0839"
    },
])

// 点击选择城市
let currentValue = ref<string>('')
const indexClick = (addressObject: any) => {
    currentValue.value = addressObject.id
    let pages = getCurrentPages()
    let prevPage = pages[pages.length - 2] as any
    prevPage.setData({
        id: currentValue.value // 注意： name必须是A页面data定义过得字段
    })
    uni.navigateBack()
    console.log(addressObject, 'addressObject')
}

// 获取屏幕剩余高度
const newsPanelHeight = ref<number>(0)
onReady(async () => {
    newsPanelHeight.value = await getScreenSHeight(uni.getStorageSync('systemInfo').sBarHeight) as number
})
</script>

<style>
page {
    background-color: #fff;
}
</style>

<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #f6f6f6 !important;
}

.active-block {
    border: 1rpx solid #388095;
    background-color: rgba($color: #388095, $alpha: 0.2) !important;
}


.list-data {
    width: 100%;
    background-color: #f6f6f6;
    border-radius: 20rpx;
    height: 80rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx 10rpx;
    text-align: center;
    margin: 10rpx 10rpx;

    .info {
        .city {
            font-size: 23rpx;
        }
    }
}

.search {
    padding: 20rpx 50rpx;
}

.hot-main {
    padding: 20rpx 50rpx;

    .title {
        padding-left: 10rpx;
        font-weight: 900;
        font-size: 25rpx;
    }

    .hot {
        flex-wrap: wrap;

        .hot-box {
            width: 30.5%;
        }
    }
}

:deep(.tn-index-list__content) {
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    padding: 0 40rpx;
}

:deep(.tn-index-list__content-item) {
    width: 30.5%;
    margin: 0 10rpx;
}

:deep(.tn-index-list__title) {

    padding-left: 60rpx !important;
    font-weight: 900 !important;
}

:deep(.to) {
    padding-top: 30rpx !important;
}

:deep(.tn-sticky) {
    top: -1px !important;
}

:deep(.n-index-list__key-list-value, .key-value) {
    color: #388095 !important;
}
</style>